<template>
	<view class="device-status">
		<view class="title-wrap">
			<view style="width: 175px;">
				<u-subsection :list="modeList" mode="subsection" :current="current"
					@change="sectionChange"></u-subsection>
			</view>
			<u--text iconStyle="color: #486ff2; margin-right: 4px; font-size: 22px;" type="primary"
				prefixIcon="list-dot" align="right" :text="$tt('status.devDetail')"
				@click="handleGoToDeviceDetail"></u--text>
		</view>
		<view class="running-status" v-show="current==0">
			<base-status v-if="device.deviceId && (device.panelEnable === 0 || !device.panelEnable)" :device="device"
				ref="baseStatus"></base-status>
			<drag v-if="device.deviceId && device.panelEnable === 1 && dragInfo.component" :drag="dragInfo"
				:device="device" ref="drag" />
		</view>
		<view class="deviceVariable" v-show="current==1">
			<device-variable ref="deviceVariable" :device="device"></device-variable>
		</view>
	</view>
</template>

<script>
	import baseStatus from './base.vue';
	import drag from './drag.vue';
	import deviceVariable from './variable.vue';

	export default {
		name: 'running-status',
		components: {
			baseStatus,
			deviceVariable,
			drag
		},
		props: {
			device: {
				type: Object,
				default: null,
				required: true
			}
		},
		watch: {
			// 兼容小程序
			device: function(newVal, oldVal) {

				this.deviceInfo = newVal;
				this.isSubDev = newVal.subDeviceList && newVal.subDeviceList.length > 0;
			}
		},
		data() {
			return {
				modeList: [this.$tt('status.stateModel'), this.$tt('status.dataModel')],
				current: 0,
				isSubDev: false,
				deviceInfo: {}, // 设备信息
				dragInfo: {},

			};
		},
		created() {
			this.deviceInfo = this.device;
			// 获取设备状态(兼容H5和APP)
			if (this.device.subDeviceList) {
				this.isSubDev = this.device.subDeviceList.length > 0;
			}
		},
		mounted() {
			this.getDragInfo()
		},
		methods: {
			//整理数据
			getDragInfo() {
				const { panelModelsJson } = this.device;
				this.dragInfo = panelModelsJson && JSON.parse(panelModelsJson)
			},
			sectionChange(index) {
				this.current = index;
			},
			baseStatusRefresh() {
				this.$refs.baseStatus.deviceStatusRefresh();
			},
			// 调整到设备详情
			handleGoToDeviceDetail() {
				const {
					deviceId
				} = this.deviceInfo;
				uni.navigateTo({
					url: '/pagesA/home/device/detail/index?deviceId=' + deviceId
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.device-status {
		.status-title {
			font-weight: 400;
			font-size: 30rpx;
			color: #000000;
			line-height: 45rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
			margin: 0 20rpx 27rpx;
		}

		.title-wrap {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			margin: 20rpx 0 30rpx;
		}
	}
</style>